<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> 

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<title>极客之家-修改密码</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">


</head>

<body> 

	<jsp:include page="top.jsp"></jsp:include>
	<!-- 这里单纯的使用一个div 没有布局成功，现在使用的是三个div，第一个和第三个只是起到布局效果 -->
	<div class="updatepwd_div">
		<div class="cotainer col-lg-4 col-md-4 col-sm-3"></div>
		<div class="cotainer col-lg-4 col-md-4 col-sm-6 col-xs-12 content_vcenter">
			<form role="form" action="" class="">
				<input type="hidden" name="uuid" id="updatepasswd_uuid" value="${currentUser.uuid }">
			
					<h4>原密码</h4>
					<div class="form-group">  
						<input type="password" name="pwd" id="oldpwd"
						class="form-control popover-show  " placeholder="input your password">
						<span id="pwdError" class="errorTxt"></span>
					</div>
					<h4>新密码</h4>
					<div class="form-group">  
						<input type="password" name="pwd" id="newpwd"
						class="form-control popover-show  " placeholder="input your password">
						<span id="pwdError" class="errorTxt"></span>
					</div>
					<h4>重复密码</h4>   
					<div class="form-group">  
						<input type="password" name="" id="renewpwd" 
							class="form-control popover-show  "  placeholder="input your password again">
						<span id="repwdError" class="errorTxt"></span>
					</div>
				<button type="button" class="btn btn-primary updatepwd_btn" id="updatepasswd_save_btn">保存</button>
				<button type="button" class="btn btn-primary updatepwd_btn" id="updatepasswd_reset_btn">重设</button>
			</form>
		</div>  
		<div class="cotainer col-lg-4 col-md-4 col-sm-3"></div> 
	</div> 
	
	
	<script> 
	var path='<%=basePath%>'; 
		$(function() {
			// 保存 
			$("#updatepasswd_save_btn").click(function() {
				if(validatePwd()){
					if(validateRePwd()){ 
						$.ajax({
							type : "POST",
							url : path+"user_updatePwd.action",
							data:{
								uuid:$("#updatepasswd_uuid").val(),  
								oldpwd:$("#oldpwd").val(),  
								newpwd:$("#newpwd").val()  
							},
							dataType : 'json',
							success : function(result) {
								if(result.success){//更新成功 
									reset();
									alertify.success(result.data);
									logout();
								}else{
									reset();
									alertify.error(result.data);
								}
							}
						});
					}
				};
				return false;
			}) 
			//重设密码框获取到焦点
			$("#repwd").focus(function(){
				$("#repwdError").text('');
			});
			//密码输入框 获取到焦点
			$("#newpwd").focus(function(){ 
				$("#newpwdError").text('');
			});
			//重设 
			$("#updatepasswd_reset_btn").click(function(){
				$('input').val('');
			})

		});
		
		function validateRePwd(){
			var value=$("#renewpwd").val();//获取输入框内容
			if(!value){
				/* $("#repwdError").text("重复密码不能为空"); */
				$("#renewpwd").focus();
				reset();
				alertify.error("重复密码不能为空");
				return false;
			}
			/**
			 * 两次输入是否一致校验
			 */
			if(value!=$("#newpwd").val()){
				/* $("#repwdError").text("两次输入的密码不一致"); */
				$("#renewpwd").focus();
				reset();
				alertify.error("两次输入的密码不一致");
				return false;
			}
			return true;
		}
		
		function validatePwd(){
			var value=$("#newpwd").val();//获取输入框内容
			var oldvalue=$("#oldpwd").val();//获取输入框内容
			if(!value){
				/* $("#pwdError").text("密码不能为空"); */
				$("#newpwd").focus();
				reset();
				alertify.error("新密码不能为空");
				return false;
			}
			if(!oldvalue){
				/* $("#pwdError").text("密码不能为空"); */
				$("#oldpwd").focus();
				reset();
				alertify.error("旧密码不能为空");
				return false;
			}
			/**
			 * 两次输入是否一致校验
			 */
			if(value.length<6||value.length>20){
				/* $("#pwdError").text("密码长度在6~20之间"); */
				$("#newpwd").focus();
				reset(); 
				alertify.error("密码长度在6~20之间");
				return false;
			}
			/**
			 * 两次输入是否一致校验
			 */
			if(oldvalue.length<6||oldvalue.length>20){
				/* $("#pwdError").text("密码长度在6~20之间"); */
				$("#oldpwd").focus();
				reset(); 
				alertify.error("密码长度在6~20之间");
				return false;
			}
			return true;
		}
		
	
		
	</script>

</body>
</html>
